<template>
    <div>
        <!-- 添加批量加格更新 -->
        <p>
            <input type="text" v-model.number="price">
            <button @click="batchUpdate">批量更新价格</button>
        </p>
        <ul>
            <!-- class绑定 -->
            <li 
                v-for="c in courses" 
                :key="c.name" 
                :class="{active: (selectedCourse === c)}" 
                @click="selectedCourse = c">
                     {{ c.name }} - ￥{{c.price || 0}} 
            </li>
            <!-- style绑定 -->
            <!-- <li 
                v-for="c in courses" 
                :key="c" 
                :style="{backgroundColor: (selectedCourse === c)? '#ddd' : 'transparent'}" 
                @click="selectedCourse = c">
                     {{ c }} 
            </li> -->
        </ul>
    </div>
</template>

<script>
    export default {
        props: {
            courses: {
                type: Array,
                required: true,
                default: function () {
                    return []
                }
            },
        },
        data() {
            return {
                // 保存选中项
                selectedCourse:'',
                price: 0    // 增加加格数据
            }
        },
        methods:{
            batchUpdate(){
                this.courses.forEach(course => {
                    this.$set(course, 'price', this.price)
                })
            }
        }
    }
</script>

<style scoped>
    .active{
        background-color: #ddd;
    }
</style>